<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>连连看</title>
  </head>
  <!-- 增加了一个拐点的判断,减少了重复代码-->
  <!-- <body body onconTextmenu="window.event.returnValue =false"></body> -->
  <body body onselectstart="return false"></body>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
    }

    img {
      width: 100%;
      height: 100%;
    }

    body {
      background-color: bisque;
    }
    /*定义竖屏 css*/
    @media screen and (orientation: portrait) {
      #box {
        width: 70%;
        margin: 25vh auto;
      }
      #boxs {
        width: 100%;
        padding-bottom: 100%;
        height: 0;
        visibility: hidden;
        box-sizing: border-box;
        position: relative;
      }
      #head {
        width: 100%;
        height: 10vh;
      }
      #start {
        font-size: 5vw;
        line-height: 200%;
      }
    }
    /*定义横屏 css*/
    @media screen and (orientation: landscape) {
      #box {
        width: 70%;
        margin: 0 auto;
      }
      #boxs {
        width: 75vh;
        height: 75vh;
        margin: 0 auto;
        visibility: hidden;
        box-sizing: border-box;
        position: relative;
      }
      #head {
        width: 100%;
        height: 15vh;
      }
      #start {
        font-size: 5vh;
      }
    }

    #start {
      width: auto;
      max-width: 40%;
      height: 50%;
      margin: 3vh auto;
      font-weight: bold;
      background-color: crimson;
      box-shadow: 1px 1px 3px 3px brown;
      text-align: center;
      color: white;
      transition: all 0.2s;
    }

    #start:hover {
      background-color: red;
      color: yellow;
      width: auto;
      max-width: 42%;
      height: 52%;
      font-size: 5.2vh;
      cursor: pointer;
    }

    #time {
      width: 100%;
      height: 50%;
      line-height: 200%;
      font-weight: bold;
      text-align: center;
      display: none;
    }

    #pro {
      width: 100%;
    }
    #boxs > li {
      width: 100%;
      padding-bottom: 10%;
      height: 0;
      /* box-sizing: border-box; */
    }

    #boxs > li > span {
      display: inline-block;
      width: 10%;
      padding-bottom: 10%;
      height: 0;
      background-color: antiquewhite;
      box-sizing: border-box;
      color: rgba(255, 255, 255, 0);
    }
  </style>

  <body>
    <div id="box">
      <div id="head">
        <p id="start">开始游戏</p>
        <p id="time">
          <progress id="pro" value="120" max="120"></progress><br />
          剩余时间 <span id="second">120</span>
        </p>
      </div>
      <ul id="boxs">
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
      </ul>
    </div>
    <script>
      //文本部分
      var border_text = "0.7";
      //开始部分
      var boxs = document.getElementById("boxs");
      var strat = document.getElementById("start");
      var time = document.getElementById("time");
      var second = document.getElementById("second");
      var pro = document.getElementById("pro");
      strat.onclick = function () {
        strat.style.display = "none";
        boxs.style.visibility = "visible";
        time.style.display = "block";

        //计时功能
        var seconds = setInterval(function () {
          second.innerText = second.innerText - 1;
          pro.value = second.innerText;
          if (second.innerText == 0) {
            clearInterval(seconds);
            alert("失败");
            window.location.reload();
          }
        }, 1000);
      };
      // 坐标
      function positions() {
        //获取坐标
        this.setpositions = function (obj) {
          this.x = Math.floor(Number(obj.offsetLeft) / standard);
          this.y = Math.floor(Number(obj.offsetTop) / standard);
          this.b = true;
        };
        //清空坐标
        this.deletes = function () {
          this.b = false;
        };
      }
      function positionTemp(x, y) {
        this.x = x;
        this.y = y;
        this.b = true;
      }
      var p1 = new positions();
      var p2 = new positions();
      //储存固定的一个方块的固定值
      var standard = 0;
      //游戏部分
      var v_boxs = document.getElementById("boxs").getElementsByTagName("li");
      var arr = new Array();
      for (let i = 0; i < v_boxs.length; i++) {
        arr[i] = v_boxs[i].getElementsByTagName("span");
      }
      //计数到100时代表方块消完
      var count = 0;
      //随机方法
      lists();
      //消除功能
      var arr2 = new Array();
      //给每个span绑定点击事件
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr[i].length; j++) {
          arr[i][j].onclick = function () {
            // alert(arr[1][1].innerText);
            //每个方块的固定距离
            standard = arr[1][1].offsetLeft;
            arr2.push(arr[i][j]);
            //判断是否有获取了两个对象
            if (arr2.length == 2) {
              if (arr2[1].style.opacity != border_text) {
                p2.setpositions(arr2[1]);
                arr2[1].style.opacity = border_text;
                setTimeout(links, 200);
              } else {
                cleanBox();
              }
            } else {
              p1.setpositions(arr2[0]);
              arr[i][j].style.opacity = border_text;
            }
          };
        }
      }
      //用于代码复用的函数
      //不匹配时初始化
      function cleanBox() {
        arr2[0].style.opacity = "1";
        arr2[1].style.opacity = "1";
        p1.deletes();
        p2.deletes();
        arr2.splice(0, 2);
      }
      //消除判断
      function links() {
        //判断方块是否一样
        if (arr2[0].innerText == arr2[1].innerText) {
          //判断是否可以消除
          if (zeros(p1, p2) || ones(p1, p2)) {
            arr2[0].style.visibility = "hidden";
            arr2[1].style.visibility = "hidden";
            count += 2;
          }
        }
        cleanBox();
        if (count == 100) {
          alert("胜利");
        }
      }
      //判断直线没有拐角
      function zeros(c1, c2) {
        if (c1.b && (c1.x == c2.x || c1.y == c2.y)) {
          let min = 0;
          let max = 0;
          //在一横排时
          if (c1.y == c2.y) {
            max = c1.x > c2.x ? c1.x : c2.x;
            min = c1.x > c2.x ? c2.x : c1.x;
            //判断中间有多少方格,是否为空,自己不算
            for (min++; min < max; min++) {
              if (arr[c1.y][min].style.visibility != "hidden") {
                return false;
              }
            }
            return true;
          }
          //在一竖列时
          if (c1.x == c2.x) {
            max = c1.y > c2.y ? c1.y : c2.y;
            min = c1.y > c2.y ? c2.y : c1.y;
            //判断中间有多少方格,是否为空,自己不算
            for (min++; min < max; min++) {
              if (arr[min][c1.x].style.visibility != "hidden") {
                return false;
              }
            }
            return true;
          }
        }
        return false;
      }
      //判断一个拐点的情况
      function ones(c1, c2) {
        //储存两个拐点位置
        let t1 = new positionTemp(c1.x, c2.y);
        let t2 = new positionTemp(c2.x, c1.y);
        //判断拐点是不是空
        if (t1.style.visibility == "hidden") {
          //判断第一个点到拐点是否相通,直接调用直线的函数
          if (zeros(c1, t1)) {
            //判断拐点到第二个点是否相通,直接调用直线的函数
            if (zeros(t1, c2)) {
              return true;
            }
          }
        }
        if (t1.style.visibility == "hidden") {
          if (zeros(c2, t2)) {
            if (zeros(t2, c1)) {
              return true;
            }
          }
        }
        return false;
      }
      //随机功能
      function lists() {
        //创建数组1
        let r_arr1 = new Array();
        //给数组1赋值随机的50个数
        for (let i = 0; i < (arr.length * 10) / 2; i++) {
          //保证有0-19个不同的数,因为刚好准备了20个图片
          if (i < 20) {
            r_arr1[i] = i;
          } else {
            r_arr1[i] = Math.floor(Math.random() * 20);
          }
        }
        //创建数组2复制数组1的内容,保证每个数字都是成双的,可以全部消完
        let r_arr2 = r_arr1.slice(0, r_arr1.length);
        //合并数组1,2
        var r_arr = [].concat(r_arr1, r_arr2);
        //打乱数组
        for (let i = 0; i < r_arr.length; i++) {
          let r = Math.floor(Math.random() * 100);
          let temp = r_arr[i];
          r_arr[i] = r_arr[r];
          r_arr[r] = temp;
        }
        //给每一个span赋值数字和对应数字的图片
        let a = 0;
        for (let i = 0; i < arr.length; i++) {
          for (let j = 0; j < arr[i].length; j++) {
            arr[i][j].innerText = r_arr[a];
            arr[i][j].style.backgroundImage =
              "url(../images/img_" + r_arr[a++] + ".png)";
            arr[i][j].style.backgroundSize = "100% 100%";
          }
        }
      }
    </script>
  </body>
</html>
